<template>
	<view class="eidpassword">
		<view class="password">
			<view style="padding: 30rpx 0;">

			</view>
			<view class="oldpassword">
				<view class="required">
					<image src="../../../static/img/Required.png" mode=""></image>
				</view>
				<view class="text">
					旧密码：
				</view>
			</view>
			<view class="input">
				<input type="text" placeholder="6-20字符,区分大小写" v-model="passwordList.pwd" />
			</view>
		</view>
		<view class="password">
			<view class="oldpassword">
				<view class="required">
					<image src="../../../static/img/Required.png" mode=""></image>
				</view>
				<view class="text">
					新密码：
				</view>
			</view>
			<view class="input">
				<input type="text" placeholder="6-20字符,区分大小写" v-model="passwordList.newPad" />
			</view>
		</view>
		<view class="password">
			<view class="oldpassword">
				<view class="required">
					<image src="../../../static/img/Required.png" mode=""></image>
				</view>
				<view class="text">
					确认新密码：
				</view>
			</view>
			<view class="input">
				<input type="text" placeholder="6-20字符,区分大小写" v-model="passwordList.affirmPwd" />
			</view>
		</view>
		<view class="save" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	import {
		modifyPasswordApi
	}
	from '@/api/user.js'
	export default {
		data() {
			return {
				passwordList: {
					// 旧密码
					pwd: '',
					// 新密码
					newPad: '',
					// 确认新密码
					affirmPwd: ''
				}
			};
		},

		methods: {
			save() {
				console.log('保存')
				if (this.passwordList.pwd == '') {
					uni.showToast({
						title: "请填写旧密码",
						icon: "none"
					})
					return
				}
				if (this.passwordList.newPad == '') {
					uni.showToast({
						title: "请填写新密码",
						icon: "none"
					})
					return
				}
				if (this.passwordList.affirmPwd == '') {
					uni.showToast({
						title: "请确认新密码",
						icon: "none"
					})
					return
				}
				if (this.passwordList.affirmPwd != this.newPad) {
					uni.showToast({
						title: "两次密码不一致",
						icon: "none"
					})
					return
				}
				modifyPasswordApi(this.passwordList).then(res => {
					console.log('res', res);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.eidpassword {
		background: linear-gradient(#FFE1BB, #FFF6EC);
		height: 100vh;
		width: 100vw;
		padding-bottom: 100rpx;

		.password {

			.oldpassword {
				display: flex;
				align-items: center;

				.required {
					width: 30rpx;
					height: 30rpx;
					margin: 0 10rpx;

					image {
						width: 100%;
						height: 100%;

					}
				}
			}

			.input {
				width: 100%;
				height: 70rpx;
				background-color: #FFEED8;
				display: flex;
				align-items: center;
				padding-left: 50rpx;
				margin: 20rpx 0;

				input {
					width: 100%;
				}
			}
		}

		.save {
			width: 60vw;
			height: 70rpx;
			background-color: #ff9d2f;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 70rpx;
			border-radius: 15rpx;
			margin: 120rpx auto;
		}
	}
</style>